/*
 * @Author: xiaosihan 
 * @Date: 2024-08-28 23:00:34 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-08-28 23:40:54
 */


import { Button, Slider } from "antd";
import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./meshParticlesPage.module.less";
import meshParticlesRender from "./meshParticlesRender";
import Transition from "three-base/Transition";

interface Iprops {
    children?: ReactNode
}

// 模型粒子效果
export default function MeshParticlesPage(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});

    const transtion = useRef(new Transition({ progress: -0.2 }));
    useEffect(() => {
        transtion.current
            .setDuration(4000)
            .setBezier([0, 0, 1, 1])
            .onChange(({ progress }) => {
                meshParticlesRender.meshParticles.setParticlesProgrees(progress);
            });
    }, []);

    useEffect(() => autorun(() => {

    }), []);

    const show = () => {
        transtion.current.set({ progress: 1.2 })
    }

    const hide = () => {
        transtion.current.set({ progress: -0.2 })
    }


    return (
        <div className={styles.meshParticlesPage} >
            <div>
                模型粒子效果&nbsp;&nbsp;
                <Slider
                    min={-0.2}
                    max={1.2}
                    defaultValue={-0.2}
                    step={0.01}
                    style={{
                        display: "inline-block",
                        verticalAlign: "middle",
                        width: 300
                    }}
                    onChange={v => {
                        meshParticlesRender.meshParticles.setParticlesProgrees(v);
                    }}
                />
                <Button size="small" onClick={show} >显示</Button>
                <Button size="small" onClick={hide} >隐藏</Button>
            </div>
            <div
                className={styles.container}
                ref={dom => meshParticlesRender.setContainer(dom)}
            >
            </div>
        </div>
    );

}